<template>
  <div class="index" ref="appRef">
    <div class="flex">
      <!-- <dv-decoration2 :dur="5" style="width:300px;height:10px;" />
      <dv-decoration2 :dur="5" class="dv-dec2" /> -->
      <div>
        <BingTu></BingTu>
      </div>
      <div>
        <dv-border-box11 class="dv-border-box11">
          <ZhuXintTu></ZhuXintTu>
        </dv-border-box11>

      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import BingTu from './bingtu/index.vue'
import ZhuXintTu from './zhuxingtu/index.vue'
import useDraw from '@/utils/useDraw'
import { onBeforeUnmount, onMounted } from 'vue'


const { appRef, realCalc, unrealCalc } = useDraw()

onMounted(() => {
  realCalc()
})

onBeforeUnmount(() => {
  unrealCalc()
})
</script>



<style scoped lang="scss">
.flex {
  display: flex;
}

.dv-dec2 {
  width: 300px;
  height: 10px;
  transform: rotateY(180deg);
}
</style>
